<template>
    <div>
        <v-header>
            <div slot="left" class="backs_icon"></div>
        </v-header>
        <div class="main_allScroll" style="padding: 0 0.18rem">
            <scroller :on-infinite="!loadMore ? infinite: finish" ref="myscroller">
            <div class="baby_head">
                <div class="head_box">
                    <div>
                        <span class="title">帅呗总收益</span>
                        <span>￥{{incomeTotal}}</span>
                    </div>
                    <p></p>
                    <div>
                        <span class="title">已提收益</span>
                        <span>￥{{incomed}}</span>
                    </div>
                </div>
            </div>
            <div class="baby_content">
                <div class="evaluation_title">
                    <p class="left"><span></span>帅呗收益</p>
                    <router-link to="/my/babyWs/income_detail" class="right">收益明细
                        <div class="right_icon" style="margin: 0 0.3rem 0 .16rem;transform: translateY(2px)"></div>
                    </router-link>
                </div>
                <div class="baby_core">
                    <div><i>￥</i><span>{{income}}</span></div>
                    <div><div @click="$router.push('/my/babyWs/babyPut')">提到余额</div></div>
                </div>
            </div>
            <div class="baby_content">
                <div class="evaluation_title">
                    <p class="left"><span></span>本月增值记录</p>
                    <div class="right" @click="showDataTime"><span>{{year +'-'+month}}</span>
                        <div class="right_icon" style="margin: 0 0.3rem 0 .16rem;transform: translateY(2px)"></div>
                    </div>
                </div>
                <div class="baby_price">
                        <div class="item" v-for="v in list" v-if="v.type == 1">
                            <div>
                                <span>{{v.recordTime.substring(8,11)}}</span>
                                <span>增值日期</span>
                            </div>
                            <div>
                                <span>{{v.amount || 0}}个</span>
                                <span>帅呗数量</span>
                            </div>
                            <div>
                                <span>+{{v.increment && v.increment != null && v.increment < 10000  ? (Math.floor(v.increment*100)/100).toFixed(2) : v.increment && v.increment != null && v.increment >= 10000 ? (v.increment/10000).toFixed(2)+'万' :0}}元</span>
                                <span>涨幅度</span>
                            </div>
                            <div>
                                <span>{{v.profitAmount && v.profitAmount != null && v.profitAmount < 10000  ? v.profitAmount : v.profitAmount && v.profitAmount != null && v.profitAmount >= 10000 ? (v.profitAmount/10000).toFixed(2)+'万' :0}}元</span>
                                <span>增值总额</span>
                            </div>
                        </div>

                </div>
            </div>
            </scroller>

        </div>
    </div>
</template>
<script>
    export default {
        name:'babyAdded',
        data(){
            return {
                incomeTotal:0,
                incomed:0,
                income:0,
                year:0,
                month:0,
                pageNum: 1,
                loadMore: false,
                list: [],

            }
        },
        activated(){
            this.init()
        },
        methods:{
            init(){
                this.incomeTotal = 0;
                this.incomed = 0;
                this.income = 0;
                this.year = 0;
                this.month = 0;
                this.pageNum = 1;
                this.loadMore = true;
                this.list = []
                this.getMonth();
                this.getBaobei()
            },

            //获取帅呗
            getBaobei() {
                this.$ajax.finance.getVirtualcoinInfo()
                    .then(res => {
                        this.incomeTotal = res.body.content.totalProfit < 10000 ? res.body.content.totalProfit : (res.body.content.totalProfit/10000).toFixed(2)+'w'
                        this.income = res.body.content.profit < 10000 ? res.body.content.profit : (res.body.content.profit/10000).toFixed(2)+'w'
                        this.incomed = res.body.content.drawBackProfit < 10000 ? res.body.content.drawBackProfit : (res.body.content.drawBackProfit/10000).toFixed(2)+'w'
                       /* this.incomeTotal = res.body.content.profit && res.body.content.profit != null && res.body.content.profit < 10000  ? res.body.content.profit : res.body.content.profit && res.body.content.profit != null && res.body.content.profit >= 10000 ? (res.body.content.profit/10000).toFixed(2)+'w' :0;
                        this.income = res.body.content.profit && res.body.content.profit != null && res.body.content.profit < 10000  ? res.body.content.profit : res.body.content.profit && res.body.content.profit != null && res.body.content.profit >= 10000 ? (res.body.content.profit/10000).toFixed(2)+'w' :0;
                        this.incomed =  (res.body.content.totalProfit && res.body.content.totalProfit != null) && (res.body.content.profit && res.body.content.profit != null)?(res.body.content.totalProfit - res.body.content.profit).toFixed(2):0;*/
                    })
            },
            //获取当前月份
            getMonth(){
                let date = new Date();
                this.year = date.getFullYear();
                this.month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() +1 ): date.getMonth() +1;
                this.getDetil()
            },
            showDataTime(){
                let that = this;
                this.$vux.datetime.show({
                    cancelText: '取消',
                    confirmText: '确定',
                    format: 'YYYY-MM',
                    value: '',
                    onConfirm (val) {
                        console.log(val)
                        that.year = val.split('-')[0];
                        that.month = val.split('-')[1];
                        that.pageNum = 1;
                        that.loadMore = false;
                        that.list = [];
                        that.getDetil()
                    },
                    onShow () {
                        console.log('plugin show')
                    },
                    onHide () {
                        console.log('plugin hide')
                    }
                })
            },

            //获取用户帅呗收益提现到余额
            getDetil(done){
                this.$ajax.finance.getVirtualcoinProfitList({
                    pageNum: this.pageNum,
                    pageSize: 15,
                    signYear:parseInt(this.year),
                    signMonth:parseInt(this.month),
                })
                    .then(res => {
                        if(done){
                            done()
                        }
                        if(this.pageNum == 1){
                            this.list = res.body.content.list
                        } else {
                            this.list = this.list.concat(res.body.content.list)
                        }

                        if(res.body.content.list.length < 15){
                            this.loadMore = true
                        }else{
                            this.pageNum++
                            console.log(this.pageNum)
                        }
                    })
            },
            infinite(done){
                this.loadMore = true
                this.getDetil(done)
            },
            finish(done){
                this.$refs.myscroller.finishInfinite(2);
            }
        }
    }
</script>
<style lang="less" scoped>
    .baby_head{
        width: 100%;
        padding: 0.18rem 0 0.2rem;
        position: relative;
        .head_box{
            border-radius: 0.1rem;
            height: 2.02rem;
            background-image: url('../../assets/img/babyAdded_ws_bg.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            p {
                display: flex;
                width: 2px;
                height: .8rem;
                background: #444;
            }
            &>div{
                flex: 1;
                height: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                color:#fff;
                font-size: .4rem;
                .title{
                    display: inline-block;
                    font-size: .28rem;
                    margin-bottom: .26rem;
                }
            }
        }
    }
    .evaluation_title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.18rem 0 0.2rem;
        .left {
            flex-direction: row;
            font-size: 0.29rem;
            color: #131514;
            display: flex;
            align-items: center;
            span {
                display: inline-block;
                width: 0.44rem;
                height: 0.44rem;
                background-image: url('../../assets/img/title_before_icon.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                margin-left: 0.10rem;
            }
            i {
                font-style: normal;
                font-size: 0.24rem;
                color: #999;
                margin-left: 0.2rem;
            }
        }
        .right {
            font-size: 0.24rem;
            color: #999;
        }
    }
    .baby_content{
        border-radius: 0.1rem;
        background: #fff;
        overflow: hidden;
        margin-bottom: 0.2rem;
        height: auto;
        &:last-child{
            .evaluation_title{
                padding-bottom: 0.3rem  ;
            }
        }
        .baby_core {
            display: flex;
            justify-content: space-between;
            font-size: 0.72rem;
            color: #E94F4F;
            padding:0 0.3rem 0 .48rem;
            i{
                font-style: normal;
                font-size: .48rem;
            }
            &>div:first-child{
                flex: 2;
                overflow: hidden;
                white-space: normal;
                text-overflow: ellipsis;
                line-height: 1rem;
            }
            &>div:nth-child(2){
                flex: 1;
                font-size: .28rem;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                &>div{
                    width: 1.3rem;
                    height: .6rem;
                    border: 1px solid #E94F4F;
                    border-radius: .1rem;
                    line-height: .6rem;
                    text-align: center;
                }
            }

        }
        .baby_price{
            position: relative;
            padding:0 0.3rem 0.2rem;
            .item{
                padding: 0.3rem 0.24rem;
                display: flex;
                justify-content: space-between;
                align-items: center;
                align-content: center;
                border-bottom: 1px solid #efefef;
                &:last-child{
                    border-bottom: none;
                }
                &>div{
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    font-size: .24rem;
                    color: #999;
                    span:first-child{
                        font-size: 0.32rem;
                        color: #e94f4f;
                        margin-bottom: 0.14rem;
                    }
                    &:first-child{
                        span:first-child{
                            font-size: 0.32rem;
                            color: #333;
                        }
                    }
                    &:nth-of-type(3){
                        flex: 1.2;
                    }

                }
            }
        }
    }
</style>